<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <canvas id="ca"></canvas>
  <!-- <img src='http://img2.imgtn.bdimg.com/it/u=1566655544,3787678294&fm=26&gp=0.jpg' alt="" width=900 height=600> -->

  <script>
    var canvas = document.getElementById('ca')
    var ctx = canvas.getContext('2d')
    var img = new Image()

    img.src = 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1579056462&di=be48b608c510c5aed38982266786c386&src=http://image.biaobaiju.com/uploads/20190324/18/1553424703-JoFVnXWYIa.jpeg'
    img.onload = function () {
      console.log(img.width, img.height)
      // 0
      // ctx.drawImage(img, 0, 0, 900, 600)

      // 90
      // canvas.width = 900
      // canvas.height = 900
      // ctx.translate(450, 450)
      // ctx.rotate(90 * Math.PI / 180)
      // ctx.translate(-450, -450)
      // ctx.drawImage(img, 0, 0, 600, 900)

      // 180
      // ctx.translate(450, 300)
      // ctx.rotate(180 * Math.PI / 180)
      // ctx.translate(-450, -300)
      // ctx.drawImage(img, 0, 0, 900, 600)

      // 270
      // canvas.width = 900
      // canvas.height = 900
      // ctx.translate(-10, 578)
      // ctx.translate(10, -578)
      // ctx.translate(450, 450)
      // ctx.rotate(270 * Math.PI / 180)
      // ctx.translate(-150, -450)
      // ctx.drawImage(img, 0, 0, 600, 900)

      // 0
      // canvas.width = 600
      // canvas.height = 450
      // ctx.drawImage(img, 0, 0, 600, 450)

      // 90
      // canvas.width = 450
      // canvas.height = 600
      // ctx.translate(225, 300)
      // ctx.rotate(90 * Math.PI / 180)
      // ctx.translate(-300, -225)
      // ctx.drawImage(img, 0, 0, 600, 450)

      // 180
      // canvas.width = 600
      // canvas.height = 450
      // ctx.translate(300, 225)
      // ctx.rotate(180 * Math.PI / 180)
      // ctx.translate(-300, -225)
      // ctx.drawImage(img, 0, 0, 600, 450)

      // 270
      // canvas.width = 450
      // canvas.height = 600
      // ctx.translate(225, 300)
      // ctx.rotate(270 * Math.PI / 180)
      // ctx.translate(-300, -225)
      // ctx.drawImage(img, 0, 0, 600, 450)

      // 360
      canvas.width = 600
      canvas.height = 450
      ctx.translate(300, 225)
      ctx.rotate(360 * Math.PI / 180)
      ctx.translate(-300, -225)
      ctx.drawImage(img, 0, 0, 600, 450)
    }
  </script>
</body>
</html>